<template>
    <div class="InstitutionalBox">
        <span class="pageName">机构管理</span>
        <!-- 搜索 -->
        <div class="searchBox">
            <div class="searchInp">
                <div class="Inp">
                    <span class="inpName">机构名称：</span>
                    <el-input v-model="name" class="w-50 m-2" placeholder="请输入" />
                </div>
                <div class="Inp">
                    <span class="inpName">管理员：</span>
                    <el-input v-model="admin" class="w-50 m-2" placeholder="请输入" />
                </div>
                <div class="Inp">
                    <span class="inpName">联系方式：</span>
                    <el-input v-model="tel" class="w-50 m-2" placeholder="请输入" />
                </div>
            </div>
            <div class="searchBtn">
                <el-button type="primary" @click="searchData" class="btn">查询</el-button>
                <el-button @click="resetSearch" class="btn">重置</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="tableBox">
            <!-- 新增 -->
            <div class="tableBtn">
                <el-button type="primary" @click="addData" class="btn">新增</el-button>
            </div>
            <!-- 表格 -->
            <div class="table">
                <el-table :data="InstitutionalData" border style="width: 100% "
                    :header-cell-style="{ background: '#f9f9f9', color: '#606266', height: '45px' }">
                    <el-table-column align="center" label="序号">
                        <template #default="{ $index }">
                            {{ (currentPage - 1) * pageSize + $index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="orgName" label="机构名称" />
                    <el-table-column align="center" prop="orgAddress" label="地址" />
                    <el-table-column align="center" prop="adminName" label="管理员姓名" />
                    <el-table-column align="center" prop="adminAccount" label="账号" />
                    <el-table-column align="center" prop="adminPhone" label="联系方式" />
                    <el-table-column align="center" prop="orgCreator" label="创建人" />
                    <el-table-column align="center" prop="createDate" label="创建日期" :formatter="dateFormat" />
                    <el-table-column align="center" label="操作" width="180px">
                        <template #default="scope">
                            <el-button link type="primary" size="default" @click="editData(scope.row)">编辑</el-button>
                            <el-button link type="primary" size="default" @click="delData(scope.row)">删除</el-button>
                            <el-button link type="primary" size="default" @click="resetData(scope.row)">重置密码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页器 -->
            <div class="pagination">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :background="background"
                    :page-sizes="[6, 10, 15]" layout="total, prev, pager, next, sizes, jumper" :total="totalData"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" medium />
            </div>
        </div>
        <!-- 删除弹出框 -->
        <el-dialog v-model="delVisible" title="删除确认" width="30%">
            <span class="prompt">
                <p class="promptContent">机构删除后下属账号将不可继续正常登录系统,是否继续此操作?</p>
            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="delVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmDel">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 重置密码弹出框 -->
        <el-dialog v-model="resetVisible" title="重置密码确认" width="30%">
            <span class="prompt"><span class="promptName">是否确认重置该机构管理员密码</span>
                <p class="promptContent">重置后该机构管理员密码将恢复为默认密码 :<span>123456</span></p>
            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmReset">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, reactive, ref, toRefs } from 'vue'
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

// 引入axios
import axios from '@/util/http'

import { parseTime } from '@/util/date'

export default defineComponent({
    name: 'Institutional',
    components: {
        ElConfigProvider,
    },
    setup() {
        const state = reactive({
            // 搜索数据
            name: ref(''),
            admin: ref(''),
            tel: ref(''),
            // 弹出框id
            orgId: ref(''),
            // 表格数据
            // 机构管理表格
            InstitutionalData: [] as any[],
            // 删除弹出框
            delVisible: ref(false),
            // 重置密码弹出框
            resetVisible: ref(false),
            // 分页器
            currentPage: ref(1),
            pageSize: ref(6),
            totalData: ref(),
            background: ref(true)
        })

        const router = useRouter();
        const store = useStore();
        // 格式化日期
        const dateFormat = (row: any) => {
            return parseTime(row.createDate, '{y}-{m}-{d}')
        }
        // 搜索
        const searchData = () => {
            axios({
                method: 'post',
                url: 'city_sys_organization/findorganizationbyconditions',
                params: {
                    currentPage: state.currentPage,
                    pageSize: state.pageSize,
                    orgName: state.name.trim(),
                    adminName: state.admin.trim(),
                    adminPhone: state.tel.trim(),
                }
            })
                .then(res => {
                    console.log(res);

                    state.InstitutionalData = res.data.data.citySysOrganizationList
                    // 分页器
                    state.totalData = res.data.data.total

                })

        }
        // 重置
        const resetSearch = () => {
            axios({
                method: 'post',
                url: 'city_sys_organization/findorganizations',
                params: {
                    currentPage: state.currentPage,
                    pageSize: state.pageSize
                }
            })
                .then(res => {
                    state.InstitutionalData = res.data.data.citySysOrganizationList
                    // 分页器
                    state.totalData = res.data.data.total
                })
            state.name = ''
            state.admin = ''
            state.tel = ''

        }

        // 表格
        // 新增
        const addData = () => {
            router.push('/AddInstitutional')
        }
        // 表格操作
        // 编辑
        const editData = (row: any) => {
            let orgId = row.orgId
            router.push({ name: 'EditInstitutional', query: { orgId } });
        }
        // 删除
        const delData = (row: any) => {
            state.delVisible = true
            state.orgId = row.orgId
        }
        // 删除弹出框
        const confirmDel = () => {
            state.delVisible = false;
            axios({
                method: 'post',
                url: "city_sys_organization/deleteorganization",
                params: {
                    orgId: state.orgId
                }
            })
                .then(res => {
                    axios({
                        method: 'post',
                        url: 'city_sys_organization/findorganizations',
                        params: {
                            currentPage: state.currentPage,
                            pageSize: state.pageSize
                        }
                    })
                        .then(res => {
                            state.InstitutionalData = res.data.data.citySysOrganizationList


                            // 分页器
                            state.totalData = res.data.data.total
                        })

                })
        }
        // 重置密码
        const resetData = (row: any) => {
            state.resetVisible = true
            state.orgId = row.orgId
        }
        // 重置密码弹出框
        const confirmReset = () => {
            state.resetVisible = false;
            axios({
                method: 'post',
                url: 'city_sys_organization/resetpassword',
                params: {
                    orgId: state.orgId
                }
            })
                .then(res => {

                    if (res.data.msg == '修改成功') {
                        axios({
                            method: 'post',
                            url: 'city_sys_organization/findorganizations',
                            params: {
                                currentPage: state.currentPage,
                                pageSize: state.pageSize
                            }
                        })
                            .then(res => {
                                state.InstitutionalData = res.data.data.citySysOrganizationList

                            })
                    }

                })
        }


        // 分页器内容改变
        const handleSizeChange = (val: number) => {
            axios({
                method: 'post',
                url: 'city_sys_organization/findorganizationbyconditions',
                params: {
                    currentPage: state.currentPage,
                    pageSize: val,
                    orgName: state.name.trim(),
                    adminName: state.admin.trim(),
                    adminPhone: state.tel.trim(),
                }
            })
                .then(res => {
                    state.InstitutionalData = res.data.data.citySysOrganizationList

                })
        }
        const handleCurrentChange = (val: number) => {
            axios({
                method: 'post',
                url: 'city_sys_organization/findorganizationbyconditions',
                params: {
                    currentPage: val,
                    pageSize: state.pageSize,
                    orgName: state.name.trim(),
                    adminName: state.admin.trim(),
                    adminPhone: state.tel.trim(),
                }
            })
                .then(res => {
                    console.log(res);
                    state.InstitutionalData = res.data.data.citySysOrganizationList
                })
        }

        onBeforeMount(async () => {
            await axios({
                method: 'post',
                url: 'city_sys_organization/findorganizations',
                params: {
                    currentPage: state.currentPage,
                    pageSize: state.pageSize
                }
            })
                .then(res => {
                    state.InstitutionalData = res.data.data.citySysOrganizationList
                    // 分页器
                    state.totalData = res.data.data.total
                })

        })

        return {
            ...toRefs(state),
            resetSearch,
            // 格式化日期
            dateFormat,
            // 表格操作
            searchData,
            addData,
            editData,
            delData,
            resetData,
            // 分页器
            handleSizeChange,
            handleCurrentChange,
            // 删除弹出框
            confirmDel,
            // 重置密码
            confirmReset

        }
    }
})
</script>

<style scoped lang="less">
.btn {
    width: 92px;
    height: 40px;
    font-size: 13px;
}

.displayShow {
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.marginShow {
    width: 90%;
    margin-top: 20px;
}

.InstitutionalBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    // 页面名称
    .pageName {
        font-size: 13px;
        color: #333333;
        font-weight: 400;
    }

    // 搜索
    .searchBox {
        width: 100%;
        height: 16%;
        margin-top: 20px;
        border-radius: 4px;
        padding: 10px 0px;
        font-size: 13px;
        .displayShow();

        // 输入框
        .searchInp {
            width: 90%;
            display: flex;
            justify-content: space-between;


            .Inp {
                display: flex;
                align-items: center;

                // 输入框名称
                .inpName {
                    width: 88px;
                }

                .el-input {
                    width: 232px;
                    height: 40px;
                    font-size: 13px;
                }
            }

        }

        // 按钮
        .searchBtn {
            width: 90%;
        }

    }

    // 表格
    .tableBox {
        height: 80%;
        margin-top: 20px;
        border-radius: 4px;
        .displayShow();

        .tableBtn {
            .marginShow()
        }

        // 表格
        .table {
            .marginShow();
            min-height: 300px;
        }

        .el-table {
            font-size: 13px;
        }

        // 分页器
        .pagination {
            .marginShow();
            display: flex;
            justify-content: flex-end;
            margin-bottom: 20px;
        }

        /deep/.el-pager li.is-active {
            font-size: 13px !important;
            font-weight: 400;
        }
    }

    // 弹出框
    .prompt {
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .promptName {
            font-size: 13px;
            font-weight: 650;
        }

        .promptContent {
            height: 50px;
            font-size: 13px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
    }

}

.el-button {
    font-size: 13px;
}
</style>